<template>
    <div>
        <h2>Pinia OptionsView</h2>
        <p>{{a }} --- {{ aa }}</p>
        <p>{{doubleA }} --- {{doubleAA }}</p>
        <p>{{tripleA }} --- {{tripleAA }}</p>
        <p><button @click="addA">addA</button></p>
        <p><button @click="addA_Async">addA_Async</button></p>
        <br>
        <p><button @click="$reset()">重置</button></p>
        <p><button @click="$patch({a:a+1})">$patch</button></p>

        <!-- a->计算属性 默认是只读的  -> 修改a并不会影响store.a -->
        <p><button @click="a++">a++</button></p>

    </div>
</template>

<script>
    import {mapState,mapActions} from "pinia"
    // 选项式
    import {useAStore} from "@/stores/a.js";

    export default {
        name:"OptionsView",
        data(){
            return {
                // store,    //将store放到data中 => 可以在template中使用
            }
        },
        methods:{
            ...mapActions(useAStore,["addA","addA_Async","$reset","$patch"])
        },
        computed:{
            ...mapState(useAStore,["a","doubleA","tripleA"]),
            ...mapState(useAStore,{
                aa:"a",
                doubleAA:"doubleA",
                tripleAA:"tripleA",
            })
        },

    }

</script>

<style lang="scss" scoped>

</style>